<template>
	<view class="familyManage">
		<Header></Header>
		<view class="familyManage-container">
			<!-- 标签页 -->
			<view class="tab-container">
				<view class="tab-item" :class="{ active: activeTab === 'manage' }" @click="switchTab('manage')">
					我管理的家族
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'joined' }" @click="switchTab('joined')">
					我加入的家族
				</view>
			</view>

			<!-- 家族列表 -->
			<view class="family-list">
				<view v-if="currentFamilyList.length === 0" class="empty-state">
					<text>暂无家族</text>
				</view>
				<view v-else>
					<view v-for="family in currentFamilyList" :key="family.id" class="family-item" @click="goToFamilyDetail(family)">
						<view class="family-header">
							<view class="family-info">
								<view class="family-info-text">
									<text class="family-name">家族名称：{{ family.name }}</text>
									<text class="family-name">创建人：{{ family.sign_name }}</text>
									<text class="family-desc">创建时间：{{ family.create_time }}</text>
								</view>
								<view class="family-info-logo">
									<image :src="family.logo" mode=""></image>
								</view>
							</view>
							<view class="family-actions">
								<button class="action-btn" @click.stop="showArticleList(family)">查看文章</button>
								<!-- <button class="action-btn" @click="showGiftManage(family)">礼物管理</button> -->
								<button class="action-btn" @click.stop="showMessageList(family)">查看留言</button>
								<button v-if="activeTab === 'manage'" class="action-btn manage-btn" @click.stop="showManageMenu(family)">管理</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 创建家族按钮 -->
		<view class="create-family-btn">
			<button class="create-btn" @click="showCreateFamily">创建家族</button>
		</view>

		<!-- 创建家族弹窗 -->
		<up-popup :show="showCreateFamilyPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="create-family-popup">
				<view class="popup-header">
					<text class="popup-title">创建家族</text>
					<up-icon name="close" @click="showCreateFamilyPopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="create-family-form">
					<up-form :model="createFamilyForm" ref="createFamilyFormRef" :labelWidth="100">
						<!-- 家族Logo -->
						<up-form-item label="家族Logo" prop="logo">
							<view class="logo-upload">
								<view v-if="createFamilyForm.logo" class="logo-preview">
									<image :src="createFamilyForm.logo" mode="aspectFill"></image>
									<view class="logo-mask" @click="uploadLogo">
										<up-icon name="camera" color="#fff" size="24"></up-icon>
									</view>
								</view>
								<view v-else class="logo-placeholder" @click="uploadLogo">
									<up-icon name="plus" color="#999" size="32"></up-icon>
									<text>上传Logo</text>
								</view>
							</view>
						</up-form-item>

						<!-- 家族名称 -->
						<up-form-item label="家族名称" prop="name" required>
							<up-input v-model="createFamilyForm.name" placeholder="请输入家族名称" maxlength="20"></up-input>
						</up-form-item>

						<!-- 家族导语 -->
						<up-form-item label="家族导语" prop="slogan">
							<up-input v-model="createFamilyForm.slogan" placeholder="请输入家族导语" maxlength="50"></up-input>
						</up-form-item>

						<!-- 家族简介 -->
						<up-form-item label="家族简介" prop="description">
							<up-textarea v-model="createFamilyForm.description" placeholder="请输入家族简介" height="120" maxlength="200"></up-textarea>
						</up-form-item>

						<!-- 创建人署名 -->
						<up-form-item label="创建人署名" prop="creator_signature">
							<up-input v-model="createFamilyForm.creator_signature" placeholder="请输入创建人署名" maxlength="20"></up-input>
						</up-form-item>
					</up-form>
				</scroll-view>
				<view class="form-actions">
					<up-button type="info" plain @click="showCreateFamilyPopup = false" class="cancel-btn">取消</up-button>
					<up-button type="primary" @click="submitCreateFamily" class="submit-btn">创建家族</up-button>
				</view>
			</view>
		</up-popup>

		<!-- 管理菜单弹窗 -->
		<up-popup :show="showManagePopup" mode="bottom" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="manage-popup">
				<view class="popup-header">
					<text class="popup-title">家族管理</text>
					<up-icon name="close" @click="showManagePopup = false"></up-icon>
				</view>
				<view class="manage-options">
					<view class="option-item" @click="showMemberAudit">
						<up-icon name="account"></up-icon>
						<text>成员审核</text>
					</view>
					<view class="option-item" @click="showMemorialAudit">
						<up-icon name="home"></up-icon>
						<text>纪念馆审核</text>
					</view>
					<view class="option-item" @click="showMemorialCanAdd">
						<up-icon name="home"></up-icon>
						<text>可加入的纪念馆</text>
					</view>
					<view class="option-item" @click="showEditFamily">
						<up-icon name="edit-pen"></up-icon>
						<text>基础信息编辑</text>
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 文章列表弹窗 -->
		<up-popup :show="showArticlePopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}" :safeAreaInsetBottom="false">
			<view class="article-popup">
				<view class="popup-header">
					<text class="popup-title">{{ selectedFamily?.name }} - 文章列表</text>
					<up-icon name="close" @click="showArticlePopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="article-list">
					<view v-if="articleList.length === 0" class="empty-state">
						<text>暂无文章</text>
					</view>
					<view v-else>
						<view v-for="article in articleList" :key="article.id" class="article-item" @click="viewArticle(article)" style="flex-flow: column;align-items: flex-start;">
							<view class="article-title">
								{{ article.title }}
							</view>
							<view class="article-other">
								<text class="article-time">文章类型：{{ article.type == 1 ? '动态' : '文化' }}</text>
								<text class="article-time" style="margin-left: 40rpx;">发布时间：{{ formatTime(article.create_time) }}</text>
							</view>
							
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<button class="create-btn" @click="showAddArticle()">发布文章</button>
				</view>
			</view>
		</up-popup>

		<!-- 发布文章弹窗 -->
		<up-popup :show="showAddArticlePopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="add-article-popup">
				<view class="popup-header">
					<text class="popup-title">发布文章</text>
					<up-icon name="close" @click="showAddArticlePopup = false"></up-icon>
				</view>
				<view class="article-form">
					<up-form :model="articleForm" ref="articleFormRef" :labelWidth="80">
						<up-form-item label="文章标题" prop="title" required>
							<up-radio-group 
							    v-model="articleForm.type"
							    placement="row">
								<up-radio label="动态" :name="1"></up-radio>
								<up-radio label="文化" :name="2"></up-radio>
							</up-radio-group>
						</up-form-item>
						<up-form-item label="文章标题" prop="title" required>
							<up-input v-model="articleForm.title" placeholder="请输入文章标题"></up-input>
						</up-form-item>
						<up-form-item label="文章内容" prop="content" required>
							<up-textarea v-model="articleForm.content" placeholder="请输入文章内容" height="200"></up-textarea>
						</up-form-item>
					</up-form>
					<view class="form-actions">
						<up-button type="info" plain @click="showAddArticlePopup = false" class="cancel-btn">取消</up-button>
						<up-button type="primary" @click="submitArticle" class="submit-btn">发布文章</up-button>
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 成员审核弹窗 -->
		<up-popup :show="showMemberAuditPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="member-audit-popup">
				<view class="popup-header">
					<text class="popup-title">成员审核</text>
					<up-icon name="close" @click="showMemberAuditPopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="member-list">
					<view v-if="memberList.length === 0" class="empty-state">
						<text>暂无待审核成员</text>
					</view>
					<view v-else>
						<view v-for="member in memberList" :key="member.id" class="member-item">
							<view class="member-info">
								<text class="member-name">{{ member.nickname || member.username }}</text>
								<text class="member-time">申请时间：{{ formatTime(member.create_time) }}</text>
							</view>
							<view class="member-actions">
								<up-button type="success" size="small" @click="handleMemberAudit(member.id, 1)" class="approve-btn">通过</up-button>
								<up-button type="error" plain size="small" @click="handleMemberAudit(member.id, 2)" class="reject-btn">拒绝</up-button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>

		<!-- 纪念馆审核弹窗 -->
		<up-popup :show="showMemorialAuditPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="memorial-audit-popup">
				<view class="popup-header">
					<text class="popup-title">纪念馆管理</text>
					<up-icon name="close" @click="showMemorialAuditPopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="memorial-list">
					<view v-if="memorialList.length === 0" class="empty-state">
						<text>暂无待审核纪念馆</text>
					</view>
					<view v-else>
						<view v-for="memorial in memorialList" :key="memorial.id" class="memorial-item">
							<view class="memorial-info">
								<text class="memorial-name">{{ memorial.mu_name }}</text>
								<text class="memorial-time">申请时间：{{ formatTime(memorial.create_time) }}</text>
							</view>
							<view class="memorial-actions">
								<up-button type="success" size="small" v-if="memorial.is_disable == 0 || memorial.is_disable == 2" @click="handleMemorialAudit(memorial.id, 1)" class="approve-btn">通过</up-button>
								<up-button type="error" plain size="small" v-if="memorial.is_disable == 0" @click="handleMemorialAudit(memorial.id, 2)" class="reject-btn">拒绝</up-button>
								<up-button type="error" plain size="small" v-if="memorial.is_disable == 1" @click="handleMemorialRemove(memorial.id)" class="reject-btn">移除</up-button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<!-- 纪念馆审核弹窗 -->
		<up-popup :show="showMemorialCanAddPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="memorial-audit-popup">
				<view class="popup-header">
					<text class="popup-title">纪念馆管理</text>
					<up-icon name="close" @click="showMemorialCanAddPopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="memorial-list">
					<view v-if="canAddMemorialList.length === 0" class="empty-state">
						<text>暂无待审核纪念馆</text>
					</view>
					<view v-else>
						<view v-for="memorial in canAddMemorialList" :key="memorial.id" class="memorial-item">
							<view class="memorial-info">
								<text class="memorial-name">{{ memorial.name }}</text>
								<text class="memorial-time">申请时间：{{ formatTime(memorial.create_time) }}</text>
							</view>
							<view class="memorial-actions">
								<up-button type="success" size="small" @click="handleMemorialJoin(memorial.id)" class="approve-btn">加入</up-button>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<!-- 编辑家族信息弹窗 -->
		<up-popup :show="showEditFamilyPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="edit-family-popup">
				<view class="popup-header">
					<text class="popup-title">编辑家族信息</text>
					<up-icon name="close" @click="showEditFamilyPopup = false"></up-icon>
				</view>
				<view class="family-form">
					<up-form :model="familyForm" ref="familyFormRef">
						<up-form-item label="家族名称" prop="name" required>
							<up-input v-model="familyForm.name" placeholder="请输入家族名称"></up-input>
						</up-form-item>
						<up-form-item label="家族描述" prop="description">
							<up-textarea v-model="familyForm.description" placeholder="请输入家族描述" height="120"></up-textarea>
						</up-form-item>
					</up-form>
					<view class="form-actions">
						<up-button type="info" plain @click="showEditFamilyPopup = false" class="cancel-btn">取消</up-button>
						<up-button type="primary" @click="submitFamilyEdit" class="submit-btn">保存修改</up-button>
					</view>
				</view>
			</view>
		</up-popup>
		<!-- 文章详情弹窗 -->
		<up-popup :show="showArticleDetail" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}" :safeAreaInsetBottom="false">
			<view class="edit-family-popup">
				<view class="popup-header">
					<text class="popup-title">文章详情</text>
					<up-icon name="close" @click="showArticleDetail = false"></up-icon>
				</view>
				<view class="popup-main">
					<view class="popup-main-title">
						{{ articleInfo.title }}
					</view>
					<view class="popup-main-info">
						<text>发布时间：{{ articleInfo.create_time }}</text>
						<text>文章类型：{{ articleInfo.type == 1 ? '动态' : '文化' }}</text>
					</view>
					<scroll-view scroll-y class="article-detail">
						<view class="popup-main-text">
							{{ articleInfo.content }}
						</view>
					</scroll-view>
				</view>
				<view class="popup-btn">
					<up-button @click="showArticleDetail = false" class="create-btn">关闭</up-button>
				</view>
			</view>
		</up-popup>

		<!-- 礼物管理弹窗 -->
		<up-popup :show="showGiftManagePopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}" :safeAreaInsetBottom="false">
			<view class="gift-manage-popup">
				<view class="popup-header">
					<text class="popup-title">礼物管理</text>
					<up-icon name="close" @click="showGiftManagePopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="gift-list">
					<view v-if="giftList.length === 0" class="empty-state">
						<text>暂无礼物</text>
					</view>
					<view v-else class="gift-grid">
						<view v-for="gift in giftList" :key="gift.id" class="gift-item" @click="editGift(gift)">
							<view class="gift-image">
								<image :src="gift.image" mode="aspectFill"></image>
								<view class="delete-icon" @click.stop="deleteGift(gift.id)">
									<up-icon name="close" color="#fff" size="16"></up-icon>
								</view>
							</view>
							<text class="gift-name">{{ gift.name }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<up-button type="primary" @click="showAddGift" class="create-btn">添加礼物</up-button>
				</view>
			</view>
		</up-popup>

		<!-- 添加/编辑礼物弹窗 -->
		<up-popup :show="showGiftFormPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="gift-form-popup">
				<view class="popup-header">
					<text class="popup-title">{{ giftForm.id ? '编辑礼物' : '添加礼物' }}</text>
					<up-icon name="close" @click="showGiftFormPopup = false"></up-icon>
				</view>
				<view class="gift-form">
					<up-form :model="giftForm" ref="giftFormRef" :labelWidth="100">
						<!-- 礼物名称 -->
						<up-form-item label="礼物名称" prop="name" required>
							<up-input v-model="giftForm.name" placeholder="请输入礼物名称" maxlength="20"></up-input>
						</up-form-item>

						<!-- 礼物图片 -->
						<up-form-item label="礼物图片" prop="image" required>
							<view class="gift-image-upload">
								<view v-if="giftForm.image" class="image-preview">
									<image :src="giftForm.image" mode="aspectFill"></image>
									<view class="image-mask" @click="uploadGiftImage">
										<up-icon name="camera" color="#fff" size="24"></up-icon>
									</view>
								</view>
								<view v-else class="image-placeholder" @click="uploadGiftImage">
									<up-icon name="plus" color="#999" size="32"></up-icon>
									<text>上传图片</text>
								</view>
							</view>
						</up-form-item>

						<!-- 普通价格 -->
						<up-form-item label="普通价格" prop="price_normal" required>
							<up-input v-model="giftForm.price_normal" placeholder="请输入普通价格" type="number"></up-input>
						</up-form-item>

						<!-- 豪华价格 -->
						<up-form-item label="豪华价格" prop="price_luxury" required>
							<up-input v-model="giftForm.price_luxury" placeholder="请输入豪华价格" type="number"></up-input>
						</up-form-item>

						<!-- 至尊价格 -->
						<up-form-item label="至尊价格" prop="price_supreme" required>
							<up-input v-model="giftForm.price_supreme" placeholder="请输入至尊价格" type="number"></up-input>
						</up-form-item>
					</up-form>
					<view class="form-actions">
						<up-button type="info" plain @click="showGiftFormPopup = false" class="cancel-btn">取消</up-button>
						<up-button type="primary" @click="submitGift" class="submit-btn">{{ giftForm.id ? '保存' : '添加' }}</up-button>
					</view>
				</view>
			</view>
		</up-popup>

		<!-- 留言列表弹窗 -->
		<up-popup :show="showMessageListPopup" mode="center" :customStyle="{width: '88%',padding: '20rpx',borderRadius: '20rpx'}">
			<view class="message-list-popup">
				<view class="popup-header">
					<text class="popup-title">留言列表</text>
					<up-icon name="close" @click="showMessageListPopup = false"></up-icon>
				</view>
				<scroll-view scroll-y class="message-list">
					<view v-if="messageList.length === 0" class="empty-state">
						<text>暂无留言</text>
					</view>
					<view v-else>
						<view v-for="message in messageList" :key="message.id" class="message-item">
							<view class="message-header">
								<view class="message-gift">
									<image :src="message.jidian_info.file_url" mode="aspectFill"></image>
								</view>
								<view class="message-info">
									<text class="message-user">留言人：{{ message.sign_name }}</text>
									<text class="message-time">{{ formatTime(message.create_time) }}</text>
									<view class="message-content">
										<text class="message-text">{{ message.content }}</text>
									</view>
								</view>
								
							</view>
							
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive, onMounted, nextTick, toRaw, computed } from 'vue'
	import Header from '@/components/header/index.vue'
	import { 
		familyAdd, familyEdit, familyDelete, familyMyList, familyJoinList, familyDetail,
		article_list, add_article, edit_article, del_article,
		user_list, user_deal, mu_list, mu_deal, mu_delete, familyCanJoin_list, mu_join, jidian_list
	} from '@/api/family.js'

	// 响应式数据
	const activeTab = ref('manage') // 当前激活的标签页
	const managedFamilies = ref([]) // 我管理的家族列表
	const joinedFamilies = ref([]) // 我加入的家族列表
	const selectedFamily = ref(null) // 当前选中的家族

	// 弹窗显示状态
	const showManagePopup = ref(false)
	const showArticlePopup = ref(false)
	const showAddArticlePopup = ref(false)
	const showMemberAuditPopup = ref(false)
	const showMemorialAuditPopup = ref(false)
	const showEditFamilyPopup = ref(false)
	const showCreateFamilyPopup = ref(false)
	const showGiftManagePopup = ref(false)
	const showGiftFormPopup = ref(false)
	const showMessageListPopup = ref(false)

	// 列表数据
	const articleList = ref([])
	const memberList = ref([])
	const memorialList = ref([])
	const giftList = ref([])
	const giftCateList = ref([])
	const messageList = ref([])

	// 表单数据
	const articleForm = reactive({
		title: '',
		content: '',
		family_id: '',
		type: 1
	})

	const familyForm = reactive({
		id: '',
		name: '',
		description: ''
	})

	const createFamilyForm = reactive({
		logo: '',
		name: '',
		slogan: '',
		description: '',
		creator_signature: ''
	})

	const giftForm = reactive({
		id: '',
		name: '',
		image: '',
		price_normal: '',
		price_luxury: '',
		price_supreme: '',
		family_id: ''
	})

	// 是否可以删除留言（只有家族创建者可以删除）
	const canDeleteMessage = computed(() => {
		return activeTab.value === 'manage' && selectedFamily.value?.creator_id === getCurrentUserId()
	})

	// 计算属性：当前显示的家族列表
	const currentFamilyList = computed(() => {
		return activeTab.value === 'manage' ? managedFamilies.value : joinedFamilies.value
	})

	// 切换标签页
	const switchTab = (tab) => {
		activeTab.value = tab
	}

	// 获取我管理的家族列表
	const getManagedFamilies = async () => {
		try {
			const res = await familyMyList()
			console.log(res)
			if (res.code === 1) {
				managedFamilies.value = res.data.list || []
			}
		} catch (error) {
			console.error('获取管理家族列表失败:', error)
			uni.showToast({ title: '获取家族列表失败', icon: 'none' })
		}
	}

	// 获取我加入的家族列表
	const getJoinedFamilies = async () => {
		try {
			const res = await familyJoinList()
			if (res.code === 1) {
				joinedFamilies.value = res.data.list || []
			}
		} catch (error) {
			console.error('获取加入家族列表失败:', error)
			uni.showToast({ title: '获取家族列表失败', icon: 'none' })
		}
	}

	// 显示文章列表
	const showArticleList = async (family) => {
		selectedFamily.value = family
		articleForm.family_id = family.id
		articleForm.title = ''
		articleForm.content = ''
		try {
			const res = await article_list({ family_id: family.id })
			if (res.code === 1) {
				articleList.value = res.data.list || []
				showArticlePopup.value = true
			}
		} catch (error) {
			console.error('获取文章列表失败:', error)
			uni.showToast({ title: '获取文章列表失败', icon: 'none' })
		}
	}

	// 显示发布文章弹窗
	const showAddArticle = () => {
		showAddArticlePopup.value = true
	}

	// 提交文章
	const submitArticle = async () => {
		if (!articleForm.title.trim()) {
			uni.showToast({ title: '请输入文章标题', icon: 'none' })
			return
		}
		if (!articleForm.content.trim()) {
			uni.showToast({ title: '请输入文章内容', icon: 'none' })
			return
		}

		try {
			const res = await add_article(articleForm)
			if (res.code === 1) {
				uni.showToast({ title: '发布成功', icon: 'success' })
				showAddArticlePopup.value = false
				// 刷新文章列表
				if (showArticlePopup.value) {
					showArticleList(selectedFamily.value)
				}
			} else {
				uni.showToast({ title: res.msg || '发布失败', icon: 'none' })
			}
		} catch (error) {
			console.error('发布文章失败:', error)
			uni.showToast({ title: '发布失败', icon: 'none' })
		}
	}

	// 显示管理菜单
	const showManageMenu = (family) => {
		selectedFamily.value = family
		showManagePopup.value = true
	}

	// 显示成员审核
	const showMemberAudit = async () => {
		showManagePopup.value = false
		try {
			const res = await user_list({ family_id: selectedFamily.value.id, status: 0 })
			console.log(res)
			if (res.code === 1) {
				memberList.value = res.data.list || []
				showMemberAuditPopup.value = true
			}
		} catch (error) {
			console.error('获取成员列表失败:', error)
			uni.showToast({ title: '获取成员列表失败', icon: 'none' })
		}
	}

	// 处理成员审核
	const handleMemberAudit = async (userId, status) => {
		try {
			const res = await user_deal({ 
				family_id: selectedFamily.value.id, 
				user_id: userId, 
				status 
			})
			if (res.code === 1) {
				uni.showToast({ title: status === 1 ? '审核通过' : '审核拒绝', icon: 'success' })
				// 刷新成员列表
				showMemberAudit()
			} else {
				uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
			}
		} catch (error) {
			console.error('审核失败:', error)
			uni.showToast({ title: '操作失败', icon: 'none' })
		}
	}
	// 显示可加入的纪念馆
	const canAddMemorialList = ref([])
	const showMemorialCanAddPopup = ref(false)
	const showMemorialCanAdd = async () => {
		showManagePopup.value = false
		try {
			const res = await familyCanJoin_list({ family_id: selectedFamily.value.id })
			if (res.code === 1) {
				canAddMemorialList.value = res.data || []
				showMemorialCanAddPopup.value = true
			}
		} catch (error) {
			console.error('获取纪念馆列表失败:', error)
			uni.showToast({ title: '获取纪念馆列表失败', icon: 'none' })
		}
	}
	
	// 显示纪念馆审核
	const showMemorialAudit = async () => {
		showManagePopup.value = false
		try {
			const res = await mu_list({ family_id: selectedFamily.value.id, status: 0 })
			if (res.code === 1) {
				memorialList.value = res.data.list || []
				showMemorialAuditPopup.value = true
			}
		} catch (error) {
			console.error('获取纪念馆列表失败:', error)
			uni.showToast({ title: '获取纪念馆列表失败', icon: 'none' })
		}
	}
	// 加入自己的纪念馆
	const handleMemorialJoin = async (muId) => {
		try {
			const res = await mu_join({ 
				family_id: selectedFamily.value.id, 
				mu_id: muId
			})
			if (res.code === 1) {
				uni.showToast({ title: '加入成功', icon: 'success' })
				// 刷新纪念馆列表
				showMemorialCanAdd()
			} else {
				uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
			}
		} catch (error) {
			console.error('审核失败:', error)
			uni.showToast({ title: '操作失败', icon: 'none' })
		}
	}
	// 移除纪念馆
	const handleMemorialRemove = async (muId) => {
		try {
			const res = await mu_delete({ 
				family_id: selectedFamily.value.id, 
				id: muId
			})
			if (res.code === 1) {
				uni.showToast({ title: '移除成功', icon: 'success' })
				// 刷新纪念馆列表
				showMemorialAudit()
			} else {
				uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
			}
		} catch (error) {
			console.error('审核失败:', error)
			uni.showToast({ title: '操作失败', icon: 'none' })
		}
	}
	// 处理纪念馆审核
	const handleMemorialAudit = async (muId, status) => {
		try {
			const res = await mu_deal({ 
				family_id: selectedFamily.value.id, 
				id: muId, 
				is_disable: status
			})
			if (res.code === 1) {
				uni.showToast({ title: status === 1 ? '审核通过' : '审核拒绝', icon: 'success' })
				// 刷新纪念馆列表
				showMemorialAudit()
			} else {
				uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
			}
		} catch (error) {
			console.error('审核失败:', error)
			uni.showToast({ title: '操作失败', icon: 'none' })
		}
	}

	// 显示编辑家族信息
	const showEditFamily = () => {
		showManagePopup.value = false
		familyForm.id = selectedFamily.value.id
		familyForm.name = selectedFamily.value.name
		familyForm.description = selectedFamily.value.description || ''
		showEditFamilyPopup.value = true
	}

	// 提交家族信息编辑
	const submitFamilyEdit = async () => {
		if (!familyForm.name.trim()) {
			uni.showToast({ title: '请输入家族名称', icon: 'none' })
			return
		}

		try {
			const res = await familyEdit(familyForm)
			if (res.code === 200) {
				uni.showToast({ title: '保存成功', icon: 'success' })
				showEditFamilyPopup.value = false
				// 刷新家族列表
				getManagedFamilies()
			} else {
				uni.showToast({ title: res.msg || '保存失败', icon: 'none' })
			}
		} catch (error) {
			console.error('保存失败:', error)
			uni.showToast({ title: '保存失败', icon: 'none' })
		}
	}
	
	// 查看文章详情
	const showArticleDetail = ref(false)
	const articleInfo = ref({})
	const viewArticle = (article) => {
		showArticleDetail.value = true
		articleInfo.value = article
		// 这里可以跳转到文章详情页面
		// uni.navigateTo({
		// 	url: `/pages/article/detail?id=${article.id}`
		// })
	}

	// 格式化时间
	const formatTime = (time) => {
		if (!time) return ''
		const date = new Date(time)
		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
	}

	// 获取当前用户ID（这里需要根据实际情况实现）
	const getCurrentUserId = () => {
		// 从本地存储或全局状态获取当前用户ID
		return uni.getStorageSync('userId') || ''
	}

	// 显示礼物管理
	const showGiftManage = async (family) => {
		selectedFamily.value = family
		try {
			// 这里需要调用获取礼物列表的API
			// const res = await getGiftList({ family_id: family.id })
			// if (res.code === 1) {
			// 	giftList.value = res.data.list || []
			// }
			// 临时数据
			giftList.value = [
				{ id: 1, name: '鲜花', image: '/static/gift1.png' },
				{ id: 2, name: '蜡烛', image: '/static/gift2.png' }
			]
			showGiftManagePopup.value = true
		} catch (error) {
			console.error('获取礼物列表失败:', error)
			uni.showToast({ title: '获取礼物列表失败', icon: 'none' })
		}
	}

	// 显示添加礼物
	const showAddGift = () => {
		// 重置表单
		giftForm.id = ''
		giftForm.name = ''
		giftForm.image = ''
		giftForm.price_normal = ''
		giftForm.price_luxury = ''
		giftForm.price_supreme = ''
		giftForm.family_id = selectedFamily.value.id
		showGiftFormPopup.value = true
	}

	// 编辑礼物
	const editGift = (gift) => {
		giftForm.id = gift.id
		giftForm.name = gift.name
		giftForm.image = gift.image
		giftForm.price_normal = gift.price_normal || ''
		giftForm.price_luxury = gift.price_luxury || ''
		giftForm.price_supreme = gift.price_supreme || ''
		giftForm.family_id = selectedFamily.value.id
		showGiftFormPopup.value = true
	}

	// 上传礼物图片
	const uploadGiftImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// 这里应该调用文件上传API
				// 临时使用本地路径
				giftForm.image = res.tempFilePaths[0]
				uni.showToast({ title: '图片上传成功', icon: 'success' })
			},
			fail: () => {
				uni.showToast({ title: '图片选择失败', icon: 'none' })
			}
		})
	}

	// 提交礼物表单
	const submitGift = async () => {
		if (!giftForm.name.trim()) {
			uni.showToast({ title: '请输入礼物名称', icon: 'none' })
			return
		}
		if (!giftForm.image) {
			uni.showToast({ title: '请上传礼物图片', icon: 'none' })
			return
		}
		if (!giftForm.price_normal || !giftForm.price_luxury || !giftForm.price_supreme) {
			uni.showToast({ title: '请填写完整的价格信息', icon: 'none' })
			return
		}

		try {
			// 这里需要调用添加/编辑礼物的API
			// const res = giftForm.id ? 
			// 	await editGiftApi(giftForm) : 
			// 	await addGiftApi(giftForm)
			// if (res.code === 1) {
			uni.showToast({ title: giftForm.id ? '编辑成功' : '添加成功', icon: 'success' })
			showGiftFormPopup.value = false
			// 刷新礼物列表
			showGiftManage(selectedFamily.value)
			// }
		} catch (error) {
			console.error('提交礼物失败:', error)
			uni.showToast({ title: '操作失败', icon: 'none' })
		}
	}

	// 删除礼物
	const deleteGift = async (giftId) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这个礼物吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						// 这里需要调用删除礼物的API
						// const result = await deleteGiftApi({ id: giftId })
						// if (result.code === 1) {
						uni.showToast({ title: '删除成功', icon: 'success' })
						// 刷新礼物列表
						showGiftManage(selectedFamily.value)
						// }
					} catch (error) {
						console.error('删除礼物失败:', error)
						uni.showToast({ title: '删除失败', icon: 'none' })
					}
				}
			}
		})
	}

	// 显示留言列表
	const showMessageList = async (family) => {
		selectedFamily.value = family
		try {
			// 这里需要调用获取留言列表的API
			const res = await jidian_list({ family_id: family.id })
			if (res.code === 1) {
				messageList.value = res.data.list || []
			}
			// 临时数据
			// messageList.value = [
			// 	{ 
			// 		id: 1, 
			// 		user_name: '张三', 
			// 		create_time: '2024-01-01 10:00:00',
			// 		content: '愿逝者安息，生者坚强。这是一段很长的留言内容，用来测试文本超出两行时的省略号显示效果。',
			// 		gift_image: '/static/gift1.png'
			// 	},
			// 	{ 
			// 		id: 2, 
			// 		user_name: '李四', 
			// 		create_time: '2024-01-02 15:30:00',
			// 		content: '缅怀先人，传承家风。',
			// 		gift_image: '/static/gift2.png'
			// 	}
			// ]
			showMessageListPopup.value = true
		} catch (error) {
			console.error('获取留言列表失败:', error)
			uni.showToast({ title: '获取留言列表失败', icon: 'none' })
		}
	}

	// 删除留言
	const deleteMessage = async (messageId) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条留言吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						// 这里需要调用删除留言的API
						// const result = await deleteMessageApi({ id: messageId })
						// if (result.code === 1) {
						uni.showToast({ title: '删除成功', icon: 'success' })
						// 刷新留言列表
						showMessageList(selectedFamily.value)
						// }
					} catch (error) {
						console.error('删除留言失败:', error)
						uni.showToast({ title: '删除失败', icon: 'none' })
					}
				}
			}
		})
	}

	// 显示创建家族弹窗
	const showCreateFamily = () => {
		// 重置表单
		createFamilyForm.logo = ''
		createFamilyForm.name = ''
		createFamilyForm.slogan = ''
		createFamilyForm.description = ''
		createFamilyForm.creator_signature = ''
		showCreateFamilyPopup.value = true
	}

	// 上传Logo
	const uploadLogo = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0]
				// 这里应该上传到服务器，暂时使用本地路径
				createFamilyForm.logo = tempFilePath
				// TODO: 实际项目中需要调用文件上传API
				// uploadFile(tempFilePath).then(url => {
				//   createFamilyForm.logo = url
				// })
			},
			fail: (error) => {
				console.error('选择图片失败:', error)
				uni.showToast({ title: '选择图片失败', icon: 'none' })
			}
		})
	}

	// 提交创建家族
	const submitCreateFamily = async () => {
		if (!createFamilyForm.name.trim()) {
			uni.showToast({ title: '请输入家族名称', icon: 'none' })
			return
		}

		try {
			const res = await familyAdd(createFamilyForm)
			if (res.code === 200) {
				uni.showToast({ title: '创建成功', icon: 'success' })
				showCreateFamilyPopup.value = false
				// 刷新我管理的家族列表
				getManagedFamilies()
				// 切换到管理标签页
				activeTab.value = 'manage'
			} else {
				uni.showToast({ title: res.msg || '创建失败', icon: 'none' })
			}
		} catch (error) {
			console.error('创建家族失败:', error)
			uni.showToast({ title: '创建失败', icon: 'none' })
		}
	}
	
	// 跳转到家族详情页
	const goToFamilyDetail = (family) => {
		uni.navigateTo({
			url: '/pages/family/index?family_id=' + family.id
		})
	}
	// 页面加载时获取数据
	onMounted(() => {
		getManagedFamilies()
		getJoinedFamilies()
	})
</script>

<style lang="scss" scoped>
.familyManage {
	min-height: 100vh;
	background-color: #f5f5f5;

	.familyManage-container {
		padding: 20rpx;

		.tab-container {
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.tab-item {
				flex: 1;
				padding: 30rpx 0;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				background: #f8f8f8;
				transition: all 0.3s;

				&.active {
					color: #fff;
					background: #C9AC83;
				}
			}
		}

		.family-list {
			.empty-state {
				padding: 100rpx 0;
				text-align: center;
				color: #999;
				font-size: 28rpx;
			}

			.family-item {
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;

				.family-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-flow: column;
					.family-info {
						width: 100%;
						margin-right: 20rpx;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						.family-info-text{
							.family-name {
								display: block;
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								margin-bottom: 10rpx;
							}
							
							.family-desc {
								display: block;
								font-size: 24rpx;
								color: #666;
								line-height: 1.4;
							}
						}
						.family-info-logo{
							width: 120rpx;
							height: 120rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
						}
						
					}

					.family-actions {
						display: flex;
						// flex-direction: column;
						gap: 10rpx;
						
						.action-btn {
							padding: 10rpx 20rpx;
							font-size: 24rpx;
							border-radius: 6rpx;
							border: none;
							background: #C9AC83;
							color: #fff;
							min-width: 120rpx;

							&.manage-btn {
								background: #ff6b6b;
							}
						}
					}
				}
			}
		}
	}
}

.create-family-popup {
	width: 100%;
	.create-family-form {
		flex: 1;
		overflow: hidden;
		padding-bottom: 20rpx;

		.logo-upload {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;

			.logo-preview {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				.logo-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.logo-placeholder {
				width: 120rpx;
				height: 120rpx;
				border: 2rpx dashed #ddd;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 10rpx;
				background: #f8f8f8;

				text {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}

// 创建家族按钮
.create-family-btn {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	width: 100%;
	padding: 20rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	.create-btn {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-radius: 50rpx;
		border: none;
		background: linear-gradient(135deg, #C9AC83, #B8956F);
		color: #fff;
		box-shadow: 0 4rpx 20rpx rgba(201, 172, 131, 0.4);
		width: 100%;
		height: 80rpx;
	}
}
.create-btn {
	padding: 20rpx 40rpx;
	font-size: 28rpx;
	border-radius: 50rpx;
	border: none;
	background: linear-gradient(135deg, #C9AC83, #B8956F);
	color: #fff;
	box-shadow: 0 4rpx 20rpx rgba(201, 172, 131, 0.4);
	width: 100%;
	height: 80rpx;
}
// 弹窗样式
.manage-popup, .article-popup, .add-article-popup, 
.member-audit-popup, .memorial-audit-popup, .edit-family-popup, .create-family-popup, .gift-form-popup, .message-list-popup, .gift-manage-popup {
	padding: 30rpx;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
}

.manage-popup {
	.manage-options {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.option-item {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			background: #f8f8f8;
			border-radius: 10rpx;
			gap: 20rpx;

			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}

.article-list, .member-list, .memorial-list {
	flex: 1;
	overflow: hidden;
	max-height: 600rpx;
	.empty-state {
		padding: 100rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
	.article-title{
		width: calc(100% - 150rpx);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.article-other{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.article-item, .member-item, .memorial-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.memorial-info{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		.article-title, .member-name, .memorial-name {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}

		.article-time, .member-time, .memorial-time {
			font-size: 24rpx;
			color: #666;
			margin-top: 10rpx;
		}

		.member-actions, .memorial-actions {
			display: flex;
			gap: 20rpx;

			.approve-btn, .reject-btn {
				height: 48rpx !important;
				border-radius: 30rpx !important;
				font-size: 24rpx !important;
				min-width: 100rpx !important;
			}

			.approve-btn {
				background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%) !important;
				border: none !important;
				color: white !important;
				box-shadow: 0 4rpx 8rpx rgba(103, 194, 58, 0.3) !important;
			}

			.reject-btn {
				border-color: #f56c6c !important;
				color: #f56c6c !important;
			}
		}
	}
}
.form-actions{
	width: 100%;
	display: flex;
	gap: 0 20rpx;
	align-items: center;
	justify-content: space-between;
}
.article-form, .family-form {
	flex: 1;
	display: flex;
	flex-direction: column;

	.form-actions {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		gap: 20rpx;

		.cancel-btn, .submit-btn {
			flex: 1;
			height: 80rpx !important;
			border-radius: 40rpx !important;
			font-size: 32rpx !important;
		}

		.cancel-btn {
			border: 2rpx solid #e4e7ed !important;
			color: #606266 !important;
		}

		.submit-btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
			border: none !important;
			box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3) !important;
		}
	}
}


.popup-footer{
	margin-top: 40rpx;
}
.popup-main{
	display: flex;
	flex-direction: column;
	gap: 30rpx 0;
	.popup-main-title{
		font-weight: bold;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-main-info{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 30rpx;
		font-size: 24rpx;
		color: #999;
	}
	.article-detail{
		overflow: hidden;
		max-height: 600rpx;
		.popup-main-text{
			width: 100%;
			margin-top: 30rpx;
		}
	}
}
.popup-btn{
	margin-top: 50rpx;
}

/* 礼物管理弹窗样式 */
.gift-manage-popup {
	.gift-list {
		max-height: 600rpx;
		overflow-y: auto;
		
		.gift-grid {
			display: grid;
			// grid-template-columns: repeat(auto-fill, minmax(200rpx, 1fr));
			grid-template-columns: repeat(3, 1fr);
			gap: 24rpx;
			padding: 30rpx 0;
		}
		
		.gift-item {
			position: relative;
			height: 220rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background: #fff;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;
			cursor: pointer;
			display: flex;
			flex-flow: column;
			align-items: center;
			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
			}
			
			.gift-image {
				position: relative;
				width: 100%;
				height: 150rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				}
			}
			
			.gift-name {
				padding: 16rpx 12rpx;
				font-size: 26rpx;
				font-weight: 500;
				text-align: center;
				color: #333;
				background: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.delete-icon {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 22rpx;
				box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
				transition: all 0.2s ease;
				z-index: 10;
				
				&:hover {
					transform: scale(1.1);
					box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 30rpx;
			
			&::before {
				content: '🎁';
				display: block;
				font-size: 80rpx;
				margin-bottom: 20rpx;
				opacity: 0.5;
			}
		}
	}
	
	.popup-footer {
		margin-top: 40rpx;
		
		.add-gift-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
			transition: all 0.3s ease;
			
			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
			}
		}
	}
}

/* 礼物表单弹窗样式 */
.gift-form-popup {
	.gift-form {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.gift-image-upload {
			width: 220rpx;
			height: 220rpx;
			border: 3rpx dashed #e1e8ed;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			background: #fafbfc;
			transition: all 0.3s ease;
			
			&:hover {
				border-color: #667eea;
				background: #f8f9ff;
			}
			
			.image-preview {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				
				.image-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.image-placeholder {
				color: #999;
				font-size: 26rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
			}
		}
		
		.form-actions {
			display: flex;
			gap: 24rpx;
			margin-top: 50rpx;
			
			.cancel-btn, .submit-btn {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				transition: all 0.3s ease;
			}
			
			.cancel-btn {
				background: #f8f9fa;
				color: #6c757d;
				border: 2rpx solid #e9ecef;
				
				&:hover {
					background: #e9ecef;
					color: #495057;
				}
			}
			
			.submit-btn {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: white;
				box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
				
				&:hover {
					transform: translateY(-2rpx);
					box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
				}
			}
		}
	}
}

/* 留言列表弹窗样式 */
.message-list-popup {
	.message-list {
		max-height: 800rpx;
		overflow-y: auto;
		
		.message-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f2f5;
			transition: all 0.3s ease;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:hover {
				background: #f8f9ff;
				border-radius: 12rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				margin: 0 -16rpx;
			}
			
			.message-header {
				display: flex;
				align-items: flex-start;
				margin-bottom: 12rpx;
				
				.message-gift {
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
					flex-shrink: 0;
					
					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				
				.message-info {
					flex: 1;
					min-width: 0;
					
					.message-user {
						display: block;
						font-size: 24rpx;
						color: #333;
						font-weight: 600;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 8rpx;
					}
					
					.message-time {
						display: block;
						font-size: 24rpx;
						color: #999;
						background: #f1f3f4;
						padding: 4rpx 12rpx;
						border-radius: 12rpx;
						width: fit-content;
					}
				}
				
				.message-delete {
					margin-left: 24rpx;
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
					color: white;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
					transition: all 0.3s ease;
					flex-shrink: 0;
					
					&:hover {
						transform: scale(1.1);
						box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.4);
					}
				}
			}
			
			.message-content {
				// margin-left: 112rpx;
				
				.message-text {
					font-size: 28rpx;
					color: #555;
					line-height: 1.6;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
					text-indent: 2em;
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 120rpx 0;
			color: #999;
			font-size: 30rpx;
			
			&::before {
				content: '💬';
				display: block;
				font-size: 80rpx;
				margin-bottom: 20rpx;
				opacity: 0.5;
			}
		}
	}
}
</style>